<template>
    <div style="font-size: 30px; margin-top: 15px; font-weight: bold; color: #ffaad5;">花卉商城</div>
    <div class="liebiao">
    <el-card class="tj" v-for="item in list" :key="item.id">
        <img :src="item.src" alt="" class="tjtup"><br>
        <span>{{ item.title }}</span><br>
      <span class="cl">{{item.xiangxi}} </span><br>
       <span style="color: #ffaad5; font-weight: bold; font-size: 18px;">￥{{ item.price }}</span>
        <el-button><span @click="buy(item)">加入购物车</span></el-button>
  </el-card>
  </div>
    <div>购买总价{{ total }},<span @click="toCart">查看购物车</span></div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import shop from '../utils/shop';
import { useStore } from '../store';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
//定义商品列表list
const list=reactive([])
//调用仓库
const store=useStore()
//定义total为响应式对象
const {total}=storeToRefs(store)
const router=useRouter()
//在生命周期函数中调用方法去获取数据
onMounted(()=>{
    shop.getGoodsList((data)=>{
        list.push(...data)
    })
})
const buy=item=>{
    //调用仓库中改变状态的方法
    store.addProduct(item)
}
const toCart=()=>{
    router.push({name:'cart'})
}
</script>

<style scoped>
.liebiao{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card-header{
  height: 50px;
  width: 500px;
  margin-top: 20px;
  font-size: 20px;
}
.tjtup{
  width: 300px;
  height: 200px;
}
.tj{
  width: 400px;
  height: 350px;
  margin-top:80px ;
  margin-left: 50px;
}
.cl{

  color: #BEBEBE;
  font-size: 15px;
}
.el-button{
  background-color: #ffaad5;
  margin-left: 55px;
}
</style>